<template>
	<view class="pdwlzt">
		<GlobalHeader :text="t('pdwlzt.distributionNetworkStatus')" xh="CW6250C1360DF7" xlh="2522L000026">
		</GlobalHeader>
		<view class="wrap" ref="pdwlztBjRef">
			<view style="
		     position: absolute;
		     top: 0;
		     left: 22%;
		     color: #fff;
		     font-size: 18px;
		     z-index: 2;
		   ">
				{{ isEmptyToCharacter(powerListDate[1]?.z329?.currentValue) }}KW
			</view>
			<view style="
		     position: absolute;
		     top: 0;
		     right: 2%;
		     color: #fff;
		      font-size: 18px;
		     z-index: 2;
		   ">
				{{ isEmptyToCharacter(powerListDate[0]?.z313?.currentValue) }}V
			</view>
			<view style="width: 100%;display: flex;position: absolute; top: 50%;">
				<view v-for="(item, index) in powInfo" :key="item"
					style="display: flex;align-items: center;justify-content: center; width: 25%;">
					<view
						style="width: 45%;display: flex;flex-direction: column;justify-content: center;font-size: 10px;">
						<view style="padding: 6rpx 0">
							{{ isEmptyToCharacter(renderValue(309, index)) }}KW
						</view>
						<view style="padding: 6rpx 0">
							{{ isEmptyToCharacter(renderValue(310, index)) }}V
						</view>
						<view style="padding: 6rpx 0">
							{{ isEmptyToCharacter(renderValue(311, index)) }}A
						</view>
						<view style="padding: 6rpx 0">
							{{ isEmptyToCharacter(renderValue(312, index)) }}HZ
						</view>
					</view>
					<histogramper :max="item.max" :value="RaphaelPercentage(309,index)"
						:custom-style="{ width: '40%', height: '200px'}"></histogramper>
				</view>
			</view>
			<view class="round" v-for="(item, index) in powInfo" :style="{ ...item.roundStyle }" :key="item">
				<view :class="['circle']" :style="{
								background: stateLight(renderValue(311, index))
							}"></view>
				<view :class="{
								circle_bottom: true,
								animation: LightAni(renderValue(311, index))
							}" :style="{
								background: stateLight(renderValue(311, index)),
								display: LightAni(renderValue(311, index)) ? 'block' : 'none'
							}"></view>
				<!-- 'animation' -->
				<view :class="{
								circle_bottom2: true,
								animation2: LightAni(renderValue(311, index))
							}" :style="{
								background: stateLight(renderValue(311, index)),
								display: LightAni(renderValue(311, index)) ? 'block' : 'none'
							}"></view>
				<!-- 'animation2' -->
			</view>
			<canvas ref="pdwlztRef" style="width: 380px;height: 341px;position: absolute; top: 28%; "></canvas>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted,
		watch,
		markRaw,
		inject,
		computed
	} from 'vue';
	import GlobalHeader from "@/components/layout/GlobalHeader.vue";
	import histogramper from "@/components/echats/histogramper.vue";
	import {
		straightLine,
		curveLine
	} from "@/mixins/globalRaphael.js";
	import {
		color as colors
	} from "@/mixins/globalParam.js";
	import {
		isEmptyToCharacter
	} from "@/plugins/index.js";
	import {
		useI18n
	} from 'vue-i18n'; // 导入 useI18n
	const {
		t
	} = useI18n();
	let allData = inject("allData");
	// 使用 useI18n 获取 t 方法
	let powerListDate = ref([]);
	let pdwlztRef = ref(null);
	let pdwlztBjRef = ref(null);
	let ctx = ref(null);
	// let off = [0.18, 0.395, 253, 373];
	// let on = [-474, -160, 0.613, 0.88];
	let off = [70.5, 151.5, 233, 335];
	let on = [70.5, 151.5, 233, 335];
	let powInfo = [{
			max: "350",
			roundStyle: {
				top: '165px',
				left: '45px'
			}
		},
		{

			max: "350",
			roundStyle: {
				top: '165px',
				left: '125px'
			}
		},
		{
			max: "350",
			roundStyle: {
				top: '165px',
				left: '207px'
			}

		},
		{
			max: "100",
			roundStyle: {
				top: '165px',
				left: '309px'
			}
		},
	];
	// 电流 > 10 开启
	let stateLight = computed(() => {
		return (zjVal) => {
			if (zjVal >= 10) return colors[3]; //
			return colors[0]
		};
	});

	let RaphaelPercentage = computed(() => {
		return (gl, index) => {
			let keys = "z" + (gl + 16 * index);

			let value = powerListDate.value[index]?.[keys]?.currentValue || 0;
			let maxgl = powerListDate.value[index]?.[keys]?.warningValue

			if (value) value = Math.ceil(100 * (value / maxgl));
			return value;
		};
	});

	let LightAni = computed(() => {
		return (zjVal) => {
			if (zjVal >= 10) return true; //
			return false
		};
	});
	watch(
		() => allData.value,
		(newVal, oldVal) => {
			let pdwlztBjRefs = pdwlztRef.value?.$el.childNodes[0];
			let targetWidth = pdwlztBjRefs.offsetWidth;
			let targetHeight = pdwlztBjRefs.offsetHeight;

			ctx.clearRect(0, 0, targetWidth, targetHeight);
			powerListDate.value[0] = newVal.power1;
			powerListDate.value[1] = newVal.power2;
			powerListDate.value[2] = newVal.power3;
			powerListDate.value[3] = newVal.power_bak;
			powerListDate.value.forEach((item, index) => {
				let key = "z" + (311 + index * 16);
				let dlVal = item?.[key]?.currentValue || 0;
				console.log("===", dlVal);
				if (dlVal > 10) {
					straightLine({
						ctx,
						translateX: on[index]
					})
				}
				if (dlVal <= 10) {
					curveLine({
						ctx,
						translateX: off[index]
					})
				}
			});
		}, {
			deep: true,
		}
	);
	onMounted(() => {
		let el = pdwlztRef.value?.$el.childNodes[0]
		ctx = el.getContext('2d')
		let targetWidth = el.offsetWidth
		let targetHeight = el.offsetHeight
		console.log("132132", targetWidth * on[2], targetWidth * on[3])
		// el.width = targetWidth
		// el.height = targetHeight
		curveLine({
			ctx,
			translateX: off[0]
		})
		curveLine({
			ctx,
			translateX: off[1]
		})
		curveLine({
			ctx,
			translateX: off[2]
		})
		curveLine({
			ctx,
			translateX: off[3]
		})
		// curveLine({
		// 	ctx,
		// 	translateX: off[2]
		// })
		// curveLine({
		// 	ctx,
		// 	translateX: off[3]
		// })

	});

	let renderValue = computed(() => {
		return (key, index) => {
			let keys = "z" + (key + 16 * index);
			let value = powerListDate.value[index]?.[keys]?.currentValue || 0;
			return value;
		};
	});
</script>

<style scoped lang="scss">
	.pdwlzt {
		background-color: rgb(45, 73, 97);
		color: rgb(64, 158, 255);
		padding: 50px 5px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 水平居中 */

		.wrap {
			margin-top: 100rpx;
			width: 380px;
			height: 341px;
			background: url("@/assets/images/pdwlzk.png") no-repeat center center;
			background-size: 100% 100%;
			position: relative;

		}

		.canvas {

			width: 200%;

		}

	}

	.warning {
		background-color: rgb(214, 58, 58) !important;
	}

	.stoping {
		background: gray !important;
	}

	.running {
		background-color: green !important;
	}

	.round div {
		background: rgba(192, 192, 192, 1);
	}

	.circle {
		width: 20px;
		height: 27px;
		z-index: 999;
		text-align: center;
		top: 20px;
		left: 16px;
		position: absolute;
	}

	.round {
		position: absolute;
		padding-top: 15px;
		padding-left: 10px;
	}


	.circle_bottom {
		background: rgba(58, 150, 225, 0.4);
		width: 26px;
		height: 30px;
		filter: alpha(opacity=40);
		position: absolute;
		top: 19px;
		left: 13px;
		display: none;
	}

	.circle_bottom2 {
		background: rgba(58, 150, 225, 0.2);
		// border-radius:100%;
		width: 30px;
		height: 34px;
		filter: alpha(opacity=20);
		// z-index:-110;
		position: relative;
		top: 1px;
		left: 1px;
		display: none;
	}

	.animation {
		-webkit-animation: twinkling 1s infinite ease-in-out;
		animation: twinkling 1s infinite ease-in-out;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	.animation2 {
		-webkit-animation: twinkling 1s infinite ease-in-out;
		animation: twinkling 1s infinite ease-in-out;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	.clPcolor {
		width: 50px;
		height: 50px;
		background-color: green;
		animation: clP 0.5s infinite;
	}


	.pdwlzt-page-box {
		display: flex;
		position: absolute;
		align-items: center;
		top: 407px;
		left: 438px;
		color: #fff;
	}

	.pdwlzt-page-box>div {
		padding: 6px 0;
	}

	@keyframes clP {
		from {
			opacity: 1;
		}

		to {
			// background-color: transparent;
			opacity: 0.1;
		}
	}

	@keyframes twinkling {
		0% {
			opacity: 0.2;
			filter: alpha(opacity=20);
			-webkit-transform: scale(1);
		}

		50% {
			opacity: 0.5;
			filter: alpha(opacity=50);
			-webkit-transform: scale(1.12);
		}

		100% {
			opacity: 0.2;
			filter: alpha(opacity=20);
			-webkit-transform: scale(1);
		}
	}
</style>